<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <a href="#/home">
        首页
    </a>

    <a href="#/list">
        列表
    </a>

    <a href="#/my">
        我的
    </a>

    <!-- 类似于router-view -->
    <div id="box">

    </div>

    <script>
        let routes = [
            {
                // url路劲
                path: "/home",
                component: "我是Home的内容"
            },
            {
                // url路劲
                path: "/list",
                component: "我是List的内容"
            },
            {
                // url路劲
                path: "/my",
                component: "我是My的内容"
            }
        ]

        // 1. 点击a标签 让url发生改变
        // 2. * hashchange(#后面的内容修改了以后会触发)
        // 3. 配置路由表
        // 4. 那我url上#后的地址去路由表中匹配

        window.addEventListener('hashchange', () => {
            // 把#去掉
            let url = location.hash.slice(1)
            // filter 会返回一个数组
            let com = routes.filter(item => item.path === url)[0]
            let box = document.getElementById('box')
            box.innerHTML = com.component
        })
    </script>
</body>
</html>